<template>
<view :class="['page',{'iphoneX':isIphoneX}]"> 
	<c-header>
		<view class="header" slot="header">
			<navigator open-type="navigateBack" :delta="1" hover-class="none" class="t-btn back-btn iconfont f-s48">&#xe63b;</navigator>
			<view class="title">聊天信息({{list.length}})</view>   
		</view>
	</c-header> 
	<view v-if="isLogin" class="body">
		<template v-if="true">
			<template v-if="true">				
				<view class="group-user-wrap">
					<view class="item" v-for="(item,index) in list" :key="index">
						<view class="icon">{{item.username|substringUsername(item.username)}}</view>
						<view class="name">{{item.username}}</view>						 							
					</view>
					<navigator :url="'/package_msg/mailUser/mailUser?scene=4&gid='+gid+'&type=2&chat_type=add'" hover-class="none" class="item">
						<view class="iconfont add-btn f-s48">&#xe8e1;</view>
					</navigator>
					<navigator v-if="group_leader_id==userInfo.id" :url="'/package_msg/mailUser/mailUser?scene=4&gid='+gid+'&type=2&chat_type=cut'" hover-class="none" class="item">
						<view class="iconfont add-btn f-s48">&#xe729;</view>
					</navigator>
				</view> 
			</template>
			<!-- <c-empty v-else><view slot="text">没有相关信息</view></c-empty> -->
		</template>
		 
	</view> 
	 
</view>
</template>

<script>    
export default{
	name:'demo',
	data(){
		return{
			isLogin:false,
			gid:'',
			isIphoneX:getApp().globalData.isIphoneX,
			userInfo:uni.getStorageSync('userInfo'),
			isSwitchTab:2,
			loadingState:{		 
				default:false,
				loading:true,
				completed:false
			},
			list:[],
			user_id:[],
			group_leader_id:''
		}
	},
	filters: {
		substringUsername(val) {
			if (val) return val.substring(val.length - 2);
		},
	},
	onShow() {
		
	},
	async onLoad(params) {
		this.isLogin =await this.$loginState('check'); 
		this.gid=params.gid;
		if(this.isLogin){
			this.getProUser();
		}
		
	},
	methods:{
		// 获取聊天室成员
		async getProUser(){
			let res=await this.$api.user_api.chatUserList({
				gid:this.gid
			})   
			console.log(res)
			if(res.data.code==200){   
				this.list=res.data.data.list;	
				this.group_leader_id=res.data.data.group_leader_id;
			}
		},
	},
	computed:{
		// 项目成员
		chat_user_update(){
			return this.$store.state.chat_user_data
		}, 
	},
	watch:{
		async chat_user_update(newer,older){   
			if(newer!=older){
				newer.cs.forEach(item=>{
					this.user_id.push(item.id)
				}) 
				let res={};
				if(newer.type=='add'){
					res=await this.$api.user_api.chatAddUser({
						gid:this.gid,
						uid:this.user_id.join(',')
					}) 
				}
				if(newer.type=='cut'){
					res=await this.$api.user_api.chatDelUser({
						gid:this.gid,
						uid:this.user_id.join(',')
					}) 
				}
				
				if(res.data.code==200){
					this.getProUser();
				} 
			} 
		},
	},
	components:{
		 
	}
}
</script>

<style lang="less">
.group-user-wrap{ 
	display: flex; 
	flex-wrap: wrap;
	padding:30rpx 20rpx 0;
	background: #fff;
	margin-bottom: 20rpx;
	.item{
		width: 20%;
		margin-bottom: 30rpx;
		.icon{
			width: 90rpx;
			height: 90rpx;
			margin: 0 auto;
			background: #09f;
			border-radius: 10rpx;
			color:#fff;
			font-size: 28rpx;
			text-align: center;
			line-height: 90rpx;
		} 
		.add-btn{
			width: 80rpx;
			height: 80rpx;
			line-height: 80rpx;
			margin: 0 auto;
			border: 5rpx dashed #ddd;
			border-radius: 10rpx;
			text-align: center;
			color:#ccc;
		}
		.name{
			text-align: center;
			font-size: 26rpx;
			color:#999;
		}
	}
}	
</style>
